<template>
  <div>
    <heck></heck>
    <heck></heck>
    <heck></heck>
    <ul>
      <li v-myfor="list"></li>
    </ul>
    <h1 v-color="'green'">那哈哈</h1>
    <h1>{{ num | two | cheng2 }}</h1>
    <h1>{{ df | cheng2 | two }}</h1>
    <transition name="fade">
      <p v-if="flag">显示隐藏</p>
    </transition>
    <button @click="flag = !flag">切换</button>
    <!-- vue动态组件component -->
    <hr />
    <button @click="comId = 'someOne'">第一个</button>
    <button @click="comId = 'someTwo'">第二个</button>
    <component :is="comId"></component>
  </div>
</template>
<script>
import someOne from './someOne.vue'
import someTwo from './someTwo.vue'
export default {
  data () {
    return {
      comId: 'someOne',
      flag: true,
      num: 154.1313132,
      df: 231.3456,
      red: 'red',
      list: ['电风扇', '风扇', '空调', '冰棍', '冰镇西瓜']
    }
  },
  components: {
    someOne,
    someTwo
  },
  filters: {
    cheng2: val => {
      return val * 2
    }
  },
  directives: {
    color: {
      inserted (el, binding) {
        el.style.background = binding.value
      }
    }
  }
}
</script>
<style lang="less">
p {
  background: darkgreen;
  height: 200px;
}
.fade-enter-active {
  opacity: 1;
  transition: all 2s;
}
.fade-enter {
  background: darkgoldenrod;
}
.fade-leave-active {
  opacity: 0;
  transition: all 2s;
}
.fade-leave {
  background: darkmagenta;
}
</style>
